<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/02.css" />
    <style>
      img {
        border: 10px solid orange;
      }
    </style>
  </head>
  <body>
    <!-- 
      三种写法：
      1. 行内：单个元素生效，用的不多
      2. style 标签中，结合选择器命中元素（适合样式不多的页面，不利于多页面复用）
      3. .css文件 结合 link 标签引入（适合多页面使用，分文件开发）
    -->
    <img
      src=""
      alt=""
      style="width: 100px"
    />
    <!-- 横着的内容 -->
    <!-- ul+li 来写 结合 css 调整结构 -->
    <ul class="list">
      <li class="item">推荐</li>
      <li>穿搭</li>
      <li>美食</li>
      <li>彩妆</li>
    </ul>

    <h2>不同标签实现相同效果</h2>
    <a class="a-btn" href="">主要按钮</a>

    <div class="div-btn">主要按钮</div>
    <button class="button-btn">主要按钮</button>

    <!-- 用 p 标签 和h标签实现类似的布局效果 -->
    <p class="p-btn">p 标签按钮</p>
    <h1 class="h-btn">h 标签按钮</h1>
  </body>
</html>
